import Image, { StaticImageData } from 'next/image'
import { Link } from '@/src/navigation'

import logo from '@/public/logo_white.png'
import cheveronIcon from '@/public/cheveron_right_green.jpg'
import locationIcon from '@/public/location_green.png'
import phoneIcon from '@/public/phone_green.png'
import emailIcon from '@/public/email_green.png'
import twitterIcon from '@/public/twitter.png'
import insIcon from '@/public/ins.png'
import facebookIcon from '@/public/facebook.png'
import { useTranslations } from 'next-intl'

interface FooterNavItemProps {
  path: string
  children: React.ReactNode
}

const FooterNavItem: React.FC<FooterNavItemProps> = (props) => {
  const { path, children } = props
  return (
    <Link href={path} className='flex items-center cursor-pointer'>
      {/* 图标 */}
      <div className='relative w-[0.3125rem] h-[0.5625rem] 2xl:w-[0.4375rem] 2xl:h-[0.8125rem]'>
        <Image
          src={cheveronIcon}
          alt='cheveron icon'
          fill
          sizes='(max-width: 1024px) 0.3125rem, 0.4375rem'
        />
      </div>
      <div className='w-[0.46875rem] 2xl:h-[0.5625rem]' />
      {/* Label */}
      <div className='text-[0.75rem] leading-[0.75rem] text-white text-opacity-50 hover:text-opacity-100 2xl:text-[1rem] 2xl:leading-[1.5rem]'>
        {children}
      </div>
    </Link>
  )
}

interface ContactItemProps {
  icon: StaticImageData
  label: string
  children: React.ReactNode
}

const ContactItem: React.FC<ContactItemProps> = (props) => {
  const { icon, label, children } = props
  return (
    <div className='flex items-start mb-1 lg:mb-[1.25rem] 2xl:mb-[2rem]'>
      <div className='relative w-2 h-2 my-[0.375rem] 2xl:w-4 2xl:h-4'>
        <Image
          src={icon}
          alt='icon'
          fill
          sizes='(max-width: 1024px) 0.375rem, 1rem'
        />
      </div>
      <div className='w-[0.375rem] 2xl:w-[0.6875rem]' />
      <div className='text-[0.75rem] leading-[1.125rem] text-white text-opacity-50 lg:max-w-[13.5rem] 2xl:text-[1rem] 2xl:leading-[1.5rem] 2xl:max-w-[20.25rem]'>
        {label}：{children}
      </div>
    </div>
  )
}

interface FooterProps {
  name: string
  desc: string
  address: string
  tel: string
  email: string
}

const Footer: React.FC<FooterProps> = (props) => {
  const t = useTranslations('footer')
  const { name, desc, address, tel, email } = props
  return (
    <footer>
      {/* 黑色部分 */}
      <div className='bg-[#0F0F19]'>
        <div className='flex flex-col lg:flex-row lg:justify-between px-[0.9375rem] lg:px-0 lg:py-10 2xl:py-[3.875rem] lg:max-w-[960px] lg:mx-auto 2xl:max-w-[1200px]'>
          <div className='h-8 lg:hidden' />
          {/* 简介 */}
          <div>
            <Link href='/'>
              <div className='flex items-center'>
                {/* Logo */}
                <div className='relative w-[1.90625rem] h-[1.40625rem] lg:w-[2.5625rem] lg:h-[1.875rem] 2xl:w-[3.8125rem] 2xl:h-[2.8125rem]'>
                  <Image
                    src={logo}
                    alt='logo'
                    fill
                    sizes='(max-width: 1024px) 1.90625rem, (max-width: 1536px) 2.5625rem, 3.8125rem'
                  />
                </div>
                <div className='w-3 lg:w-[0.4375rem] 2xl:w-[0.6875rem]' />
                <div className='text-white font-bold text-[0.9375rem] lg:text-[1.25rem] 2xl:text-[1.875rem]'>
                  {name}
                </div>
              </div>
            </Link>
            <div className='h-3 lg:h-[1.6875rem] 2xl:h-[2.5rem]' />
            <div className='text-white text-opacity-50 text-[0.75rem] leading-[1.25rem] lg:max-w-[16.25rem] 2xl:text-[1rem] 2xl:leading-[1.65rem] 2xl:max-w-[24.3125rem]'>
              {desc}
            </div>
          </div>
          <div className='h-[1.875rem] lg:hidden' />
          {/* 导航 */}
          <div>
            <div className='text-white text-[0.875rem] leading-[0.875rem] font-bold lg:leading-[1.875rem] 2xl:text-[1.25rem] 2xl:leading-[2.8125rem]'>
              {t('navTitle')}
            </div>
            <div className='h-[0.78125rem] lg:h-[1.6875rem] 2xl:h-[2.5rem]' />
            <div className='grid grid-rows-2 grid-flow-col gap-[0.75rem] lg:grid-flow-row lg:grid-cols-1 lg:gap-[1.25rem] 2xl:gap-[1.25rem]'>
              <FooterNavItem path='/'>{t('home')}</FooterNavItem>
              <FooterNavItem path='/about'>{t('aboutUs')}</FooterNavItem>
              <FooterNavItem path='/products'>{t('product')}</FooterNavItem>
              <FooterNavItem path='/cases'>{t('case')}</FooterNavItem>
              <FooterNavItem path='/news'>{t('news')}</FooterNavItem>
              <FooterNavItem path='/message'>{t('message')}</FooterNavItem>
              <FooterNavItem path='/contact'>{t('contactUs')}</FooterNavItem>
            </div>
          </div>
          <div className='h-[1.875rem] lg:hidden' />
          {/* 联系方式 */}
          <div>
            <div className='text-white text-[0.875rem] leading-[0.875rem] font-bold lg:leading-[1.875rem] 2xl:text-[1.25rem] 2xl:leading-[2.8125rem]'>
              {t('contactTitle')}
            </div>
            <div className='h-[1rem] lg:h-[1.6875rem] 2xl:h-[2.5rem]' />
            <div className='flex flex-col'>
              <ContactItem icon={locationIcon} label={t('add')}>
                {address}
              </ContactItem>
              <ContactItem icon={phoneIcon} label={t('tel')}>
                {tel}
              </ContactItem>
              <ContactItem icon={emailIcon} label={t('email')}>
                {email}
              </ContactItem>
            </div>
          </div>
          <div className='h-6 lg:hidden' />
        </div>
      </div>
      {/* 白色部分 */}
      <div className='bg-white'>
        <div className='flex flex-col items-center lg:flex-row lg:justify-between lg:max-w-[960px] lg:mx-auto lg:py-[1.5rem] 2xl:py-[2.25rem] 2xl:max-w-[1200px]'>
          <div className='h-2 lg:hidden' />
          <div className='text-[0.75rem] leading-[1.25rem] text-center mx-[2.1875rem] lg:mx-0 2xl:text-[1rem] 2xl:leading-[1.65rem]'>
            {t('copyright')}
            <a href='http://tykhrs.cn/'>kehuirongsheng</a>
          </div>
          <div className='h-3 lg:hidden' />
          <div className='flex items-center space-x-3'>
            <a
              href='https://twitter.com/'
              target='_blank'
              className='relative w-[1.359375rem] h-[1.359375rem] lg:w-4 lg:h-4 2xl:w-6 2xl:h-6'
            >
              <Image
                src={twitterIcon}
                alt='twitter'
                fill
                sizes='(max-width: 1024px) 1.359375rem, (max-width: 1536px) 1rem, 1.5rem'
              />
            </a>
            <a
              href='https://www.instagram.com/ya.ng4646?igsh=cWlxa3hxMWUyaGZn&utm_source=qr'
              target='_blank'
              className='relative w-[1.359375rem] h-[1.359375rem] lg:w-4 lg:h-4 2xl:w-6 2xl:h-6'
            >
              <Image
                src={insIcon}
                alt='instagram'
                fill
                sizes='(max-width: 1024px) 1.359375rem, (max-width: 1536px) 1rem, 1.5rem'
              />
            </a>
            <a
              href='https://www.facebook.com/profile.php?id=100031007945991&mibextid=kFxxJD'
              target='_blank'
              className='relative w-[1.359375rem] h-[1.359375rem] lg:w-4 lg:h-4 2xl:w-6 2xl:h-6'
            >
              <Image
                src={facebookIcon}
                alt='facebook'
                fill
                sizes='(max-width: 1024px) 1.359375rem, (max-width: 1536px) 1rem, 1.5rem'
              />
            </a>
          </div>
          <div className='h-4 lg:hidden' />
        </div>
      </div>
    </footer>
  )
}

export default Footer
